<template>
    <div>
        <el-dialog
  title="选择商品"
  :visible.sync="xzspisshow"
  :before-close="close"
  width="65%"
  center>
   <el-form :inline="true" :model="form" class="demo-form-inline">
  <el-form-item label="商品名称：">
    <el-input v-model="form.user" placeholder="请输入"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
  </el-form-item>
</el-form>
    <!-- <div ref="sp">111</div> -->
     <!-- <div class="box2" >
          <div class="boxsp" v-for="(item,index) in hdlist1" :key="index">
            <div class="sp" @click="del(item.skuId)"><img :src="item.skuImage" alt="">
            <div class="spname">{{item.brandName}}</div>
            </div>
             <div>
           </div>
          </div>
    </div> -->
    <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
    <el-radio-button :label="index" v-for="(item,index) in hdlist1" :key="index">
      <div class="sp" @click="img1(item)"><img :src="item.skuImage" alt="">
       <div class="spname">{{item.brandName}}</div>
      </div>
    </el-radio-button>
  </el-radio-group>
  
  
       
  <span slot="footer" class="dialog-footer">
    <el-button @click='close'>确认</el-button>
    <!-- <el-button type="primary" @click='submit'>采纳建议</el-button> -->
  </span>
</el-dialog>

    </div>
</template>

<script>
export default {
    name: 'eqweq',
props:{
    xzspisshow:{
      type:Boolean,
      default:true
    },
    tianJialist1:{
    default:()=>{}
    },
   
    hdlist1:{
         default:()=>[]
    }
},
    data() {
        return {
             form: {
          user: '',

        },
        tabPosition: 'left',
        tianJialist:{}
        };
    },

    mounted() {
        
    },

    methods: {
      img1(item){
        this.tianJialist = item
           console.log(this.tianJialist);
      },

        close(){
      this.$emit('update:xzspisshow',false)
      
      this.$emit('update:tianJialist1',{...this.tianJialist})
    

    //   this.$refs.form.resetFields()
    //   this.form={}
      // console.log(this.form,'为什么清空不生效,生效啦');
    },

    // 点击提交
    async submit(){
    //   await this.$refs.form.validate()
    //   const res=await creatorder(this.form)
    //   // console.log(res,'新增成功了吗');
    //   this.$message.success('新增成功')
    //   this.close()
      this.$emit('update:xzspisshow',false)
    //   this.$refs.form.reserFileds()
    //   this.form={}
    //   this.$parents.getList()
    },

     onSubmit() {
        console.log('submit!');
      },

       del(skuId){
         alert(skuId)

            this.$refs.sp.style.visibility = `hidden` 
           
     },

    },
};
</script>

<style lang="scss" scoped>
     ::v-deep  .el-radio-button__inner{
          width: 170px;
          
       }

          .sp{
              width: 100% ;
              height: 130px;
               
              img{
                 width: 100%;
                 height: 90%;
              }
          }




    //     .box2{
    //     display: flex;
    //     flex-wrap: wrap;
    //     height: 400px;
    //     overflow: auto;

    //     .boxsp{
    //         width: 17%;
    //         height: 183px;
    //         // background-color: pink;
    //         border: 1px solid red;
    //         margin: 10px ;
            
    //          .sp{
              
    //           width: 100% ;
    //           height: 130px;
    //           background-color: #fff;
               
    //           img{
    //              width: 100%;
    //              height: 100%;
    //           }

    //           .spname{
    //               margin-left: 40px;
              
    //           }
              
    //          }
          
    //     }
    // }



    
</style>